
// 定义进入动画 
@keyframes bounceFromRightToCenter {
	from { transform: translate3d(100%, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}
// 定义退出动画 
@keyframes bounceFromCenterToRight {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(100%, 0, 0); }
}

// 进入
.bounce-enter-active {
	animation: bounceFromRightToCenter .4s forwards;
	box-shadow: -3px 0  5px rgba(0, 0, 0, .1);
}
// 离开
.bounce-leave-active {
	animation: bounceFromCenterToRight .4s forwards;
	box-shadow: -3px 0  5px rgba(0, 0, 0, .1);
}

.search-result-container {
  position: fixed;
  top: 11.5vw;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
	background: #fff;
	.content-scroll {
		height: 100%;
		overflow: hidden;
	}
	.empty-search-result {
		text-align: center;
		margin-top: 100px;
		letter-spacing: 2px;
		color: #999 ;
	}
	.search-history-wrap {
		padding: 1rem;
		.s-h-title {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			margin-bottom: 1rem;
		}
		.s-h-list {
			.s-h-name {
				display: inline-block;
				background: #F7F7F7;
				padding: 8px 20px;
				border-radius: 15px;
				margin-right: 8px;
				margin-bottom: 8px;
			}
			.more {
				margin-top: 10px;
				text-align: center;
				font-size: 14px;
				color: #999;
			}
		}
	}
	.empty-search-history {
		text-align: center;
		margin-top: 100px;
		letter-spacing: 2px;
		color: #999 ;
	}
}